<script setup>
// 设置表格数据
import { deleteTpl, getSelfTpl } from '@/api/tpl.js';
import { getCurrentInstance, ref } from 'vue';
import AddTplDialog from '@/views/personalCenter/components/tplAdd/components/addTplDialog';
import { downloadByUrl } from '@/utils/assets.js';
import { useRouter } from 'vue-router';
import { useTableFormatter } from '@/mixins/commonTableFormatter.js';

const instance = getCurrentInstance();
const { $message } = instance.appContext.config.globalProperties;
const { VITE_INTERFACE_DOMAIN } = import.meta.env;
const router = useRouter();

const { timeFormatter, emptyFormatter } = useTableFormatter();

const tableData = ref([]);
const pageSize = ref(10);
const currentPage = ref(1);
const total = ref(0);
const columns = [
  { prop: 'tplName', label: '我的上传模板' },
  { prop: 'status', label: '状态' },
  { prop: 'fileName', label: '操作', slot: true },
  { prop: 'createTime', label: '上传时间', formatter: timeFormatter },
];
async function getTableData() {
  const returnData = await getSelfTpl({
    pageSize: pageSize.value,
    pageNum: currentPage.value,
  });
  if (returnData?.code === 200) {
    console.log(returnData);
    tableData.value = returnData.rows;
    total.value = returnData.total;
  }
}
function paginationChange() {
  getTableData();
}
getTableData();

// 跳转到上传
function jumpUpload(row) {
  router.push({ path: row.typeCode === 'qklw' ? '/formatPeriodical' : '/formatPaper' });
}

// 下载模版
async function downLoadTpl(item) {
  const prefix = VITE_INTERFACE_DOMAIN.startsWith('http')
    ? VITE_INTERFACE_DOMAIN
    : `${window.location.origin}${VITE_INTERFACE_DOMAIN}`;
  downloadByUrl(`${prefix}/tpl/viewTplFile?tplCode=${item.tplCode}`, item.tplName);
}
// 添加弹窗
const showAddDialog = ref(false);
function addHandle() {
  if (!showAddDialog.value) {
    showAddDialog.value = true;
  }
}

// 删除模版
async function deleteHandle(item) {
  const returnData = await deleteTpl({ tplCode: item.tplCode });
  if (returnData?.code === 200) {
    $message.success(returnData?.msg);
    await getTableData();
  } else {
    $message.error(returnData?.msg);
  }
}

// 自定义删除模版
async function customerDelete(item) {
  const returnData = await deleteHandle(item);
  if (returnData) {
    await getTableData();
  }
}

// 弹窗关闭
function closeDialog() {
  showAddDialog.value = false;
  getTableData();
}
</script>

<template>
  <el-table :data="tableData" border>
    <template v-for="(item, index) in columns" :key="index">
      <el-table-column
        :prop="item.prop"
        :label="item.label"
        :formatter="item.formatter || emptyFormatter"
      >
        <template v-if="item.slot" #default="{ row }">
          <img
            v-if="row.status === '已完成'"
            src="@/assets/images/personalCenter/look-icon.png"
            alt=""
            class="look-icon icon"
            title="跳转上传"
            @click="jumpUpload(row)"
          />
          <img
            src="@/assets/images/personalCenter/delete-icon.png"
            alt=""
            class="delete-icon icon"
            title="删除"
            @click="customerDelete(row)"
          />
          <img
            v-if="row.status === '未完成'"
            src="@/assets/images/personalCenter/upload-icon.png"
            alt=""
            class="delete-icon icon"
            title="下载"
            @click="downLoadTpl(row)"
          />
        </template>
      </el-table-column>
    </template>
  </el-table>
  <div class="global-pagination-box">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @change="paginationChange"
    />
  </div>
  <div class="add-tpl-box">
    <div class="add-btn" @click="addHandle">添加模板</div>
    <div class="hint">注意：自定义模板生成时间为1个工作日，请生成完成后再进行使用。</div>
  </div>
  <AddTplDialog v-if="showAddDialog" @close="closeDialog" />
</template>

<style scoped lang="less">
@import '@/views/personalCenter/components/record/record.less';
@import './tplAdd.less';
</style>
